<#cenluan title="上传照片" menu="gallery" uploader="WebUploader">
    <ol class="breadcrumb">
        <li><a href="/gallery">相册</a></li>
        <li>${gallery.html}</li>
        <li>上传照片</li>
    </ol>
    <p id="picker" class="hide">点击上传图片</p>

    <div class="row">
        <div class="col-md-4">
            <button id="btn-picker" class="btn btn-success btn-block mb20">
                <span class="glyphicon glyphicon-folder-open"></span>&nbsp;点击选择照片
            </button>
        </div>
        <div class="col-md-4">
            <button class="btn btn-default btn-block mb20" id="btn-start" style="display:none;">
                <span class="glyphicon glyphicon-upload"></span>&nbsp;全部开始
            </button>
        </div>
    </div>
    <div class="row" id="dndArea"></div>

    <script>

        $(function () {
            var UPLOADER = WebUploader.create({
                swf: "/static/ext/WebUploader/Uploader.swf",
                server: "/photo/save/${gallery.id}",
                pick: {
                    id: "#picker",
                    multiple: true
                },
                //接收的文件类型
                accept: {
                    title: "Images",
                    extensions: "gif,jpg,jpeg,bmp,png",
                    mimeTypes: 'image/*'
                },
                fileNumLimit: 50,
                fileSingleSizeLimit: 10 * 1024 * 1024,
                sendAsBinary: true,
                //缩略图
                thumb: {
                    width: 300,
                    height: 300,
                    quality: 100,
                    allowMagnify: false,
                    crop: true,
                    type: 'image/jpeg',
                    compressSize: 1024 * 500
                },
                //上传图片压缩
                compress: {
                    width: 1600,
                    height: 1600,
                    quality: 80,
                    allowMagnify: false,
                    crop: false,
                    preserveHeaders: true,
                    noCompressIfLarger: true
                },
                duplicate: true
            });
            //uploader统计信息检查，如果上传失败、上传中和队列中的文件加一起是0，重置uploader
            //并且显示重新上传按钮，让用户继续上传
            function statsCheck() {
                var stats = UPLOADER.getStats();
                var num = stats.progressNum + stats.uploadFailNum + stats.queueNum;
                if (num == 0) {
                    UPLOADER.reset();
                    $("#btn-picker").show();
                    $("#btn-start").hide();
                }
            }

            //选择照片按钮
            $("#btn-picker").click(function () {
                $("input[type='file']").trigger("click");
            });
            //开始上传按钮
            $("#btn-start").click(function () {
                UPLOADER.upload();
                $("#btn-picker").hide();
                $(this).hide();
            });
            //删除按钮
            $("#dndArea").on("click", ".btn-del", function () {
                UPLOADER.removeFile($(this).data("id"));
                $("#" + $(this).data("id")).remove();
                statsCheck();
            });
            //重试按钮
            $("#dndArea").on("click", ".btn-retry", function () {
                UPLOADER.retry($(this).data("id"));
            });
            //加入文件，创建缩略图
            UPLOADER.on("fileQueued", function (file) {
                var template = $("<div class='col-lg-2 col-md-3 col-sm-6' id='" + file.id + "'></div>");
                var thumbnail = $("<div class='thumbnail text-center'></div>");
                template.append(thumbnail);
                UPLOADER.makeThumb(file, function (error, ret) {
                    if (error) {
                        thumbnail.prepend("<img src='/static/img/cant-preview.jpg'>");
                    } else {
                        thumbnail.prepend("<img src='" + ret + "'>");
                    }
                });

                thumbnail.append("<div class='caption'><button class='btn btn-default btn-del' type='button' data-id='" + file.id + "'>"
                + "<span class='glyphicon glyphicon-trash'></span>&nbsp;删除</button></div>");
                $("#dndArea").append(template);
                if ($("#btn-start").is(":hidden")) {
                    $("#btn-start").show();
                }
            });
            //加入文件失败提示
            UPLOADER.on("error", function (type) {
                var msg = "加入文件失败";
                if (type == "F_EXCEED_SIZE") {
                    msg = "文件过大，不能超过10M";
                } else if (type == "Q_EXCEED_NUM_LIMIT") {
                    msg = "文件总数超出限制，最多只能同时添加50张图片";
                } else if (type == "Q_EXCEED_SIZE_LIMIT") {
                    msg = "文件大小超出限制";
                } else if (type == "Q_TYPE_DENIED") {
                    msg = "不支持的文件格式";
                }
                alert(msg);
            });
            //文件上传中，生成进度条
            UPLOADER.on("uploadProgress", function (file, percentage) {
                var progress = $("#" + file.id).find("progress");
                if (!progress.length) {
                    progress = $("<div class='progress'><div class='progress-bar' style='width: 0;'></div></div>");
                    $("#" + file.id).find(".caption").empty().append(progress);
                }
                progress.children(".progress-bar").css("width", percentage * 100 + "%");
            });
            //文件上传失败事件
            UPLOADER
                    .on(
                    "uploadError",
                    function (file, reason) {
                        console.log("上传失败：" + reason);
                        var caption = $("#" + file.id).find(".caption");
                        caption.empty();
                        caption.append("<p class='text-danger'>上传失败</p>");
                        var btnGroup = $("<div class='btn-group btn-group-justified'>");
                        btnGroup
                                .append("<a href='javascript:;' class='btn btn-default btn-del' data-id='"
                                + file.id + "'><span class='glyphicon glyphicon-trash'></span>&nbsp;"
                                + "删除</a>");
                        btnGroup
                                .append("<a href='javascript:;' class='btn btn-default btn-retry' data-id='"
                                + file.id + "'><span class='glyphicon glyphicon-repeat'></span>&nbsp;"
                                + "重试</a>");
                        caption.append(btnGroup);
                    });
            //文件上传成功事件
            UPLOADER.on("uploadSuccess", function (file) {
                $("#" + file.id).find(".caption").html("<p class='text-success'>上传成功</p>")
                setTimeout(function () {
                    UPLOADER.removeFile(file);
                    $("#" + file.id).remove();
                    statsCheck();
                }, 2000);
            });
        });
    </script>
</#cenluan>